<!--
 * @Descripttion: 
 * @version: 
 * @Author: 
 * @Date: 2021-11-26 13:55:24
-->
<template>
  <div class="step">
    <div class="list">
      <div class="item" v-for="index in 4" :key="index">
        <span :class="active === index ? 'highlight' : ''" class="item-span">{{
          index
        }}</span>
        <i v-if="index !== 4"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 1
    }
  }
}
</script>

<style lang="less" scoped>
.step {
  width: 100%;
  height: 190px;
  background: #163862;
  display: flex;
  align-items: center;
  justify-content: center;
  .list {
    display: flex;
    .item {
      display: flex;
      align-items: center;
    }
    .item-span {
      display: block;
      width: 36px;
      height: 36px;
      border: 1px solid #fff;
      border-radius: 18px;
      font-size: 18px;
      line-height: 36px;
      color: white;
      text-align: center;
      position: relative;
      z-index: 10;
    }
    i {
      display: inline-block;
      width: 37px;
      height: 1px;
      border-top: 1px dotted white;
    }
    .highlight {
      background: white;
      color: #222;
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
    }
  }
}
</style>
